<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html {
            height: 100%;
            width: 100%;
            overflow: hidden;
        }

        body {
            background: linear-gradient(90deg, #b9deed, #efefef);
            margin: 0;
            padding: 0;
        }

        .main {
            display: flex;
            flex-flow: row wrap;
            width: 100%;
            justify-content: center;
        }

        .column {
            flex-basis: 1 10px;
            width: calc(100% / 3 - 10px);
            margin: 5px;
            padding: 0;
        }

        figure {
            position: relative;
            overflow: hidden;
            margin: 0;
            height: 100%;
            width: 100%;
            filter: grayscale(.8);
        }

        figure img {
            width: 100%;
            height: 100%;
        }

        figure::before {
            position: absolute;
            top: 50%;
            left: 50%;
            z-index: 2;
            display: block;
            content: '';
            width: 0;
            height: 0;
            background: rgba(0, 0, 0, .2);
            border-radius: 100%;
            transform: translate(-50%, -50%);
            opacity: 0;
        }

        figure:hover {
            animation: bloom ease-in-out .75s forwards;
        }

        figure:hover::before {
            animation: circle .75s;
        }

        @keyframes bloom {
            0% {
                filter: grayscale(.8);
            }

            40% {
                filter: grayscale(.5);
            }

            100% {
                filter: grayscale(0);
            }
        }

        @keyframes circle {
            0% {
                opacity: .5;
                background: rgba(213, 156, 34, .2);

            }

            40% {
                opacity: 1;
                background: rgba(213, 34, 160, .2);
            }

            100% {
                width: 200%;
                height: 200%;
                opacity: 0;
            }
        }

        /* General style */
        header {
            width: 100%;
            display: block;
            background: #FFF;
            height: 40px;
            margin-bottom: 4%;
            color: #ccc;
            font-family: sans-serif;
            font-weight: bold;
            box-shadow: 0px 2px 0px 0px rgba(125, 121, 125, 0.3);
            overflow: hidden;
        }

        header h1,
        header a {
            display: inline-block;
            font-size: .8rem;
            margin: auto 10px;
            line-height: 40px;

        }

        header h1 {
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        header a {
            text-decoration: none;
            background-color: #eee;
            color: #999;
            padding: 0 20px;
            transition: all ease-in-out .3s;
        }

        header a:hover {
            background-color: #93dfec;
            color: #eee;
            margin-left: -3px;
        }
    </style>
</head>

<body>
    <header>
        <h1>Animation @keyframes in Image Hovers</h1>
        <a href="http://webdesignerwall.com/tutorials/easy-css-animation-using-keyframes" target="_blank">View
            Tutorial</a>
    </header>

    <div class="main">
        <div class="column">
            <figure><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/927610/wolf.jpg" /></figure>
        </div>
        <div class="column">
            <figure><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/927610/lion.jpg" /></figure>
        </div>
        <div class="column">
            <figure><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/927610/tiger.jpg" /></figure>
        </div>
    </div>
</body>

</html>